<template>
  <div id="index">
    <el-row>
      <el-col :span="24"  class="tltleText">
      </el-col>
      <el-col :span="24"  class="chartCenter" style="margin-top: 0.6vh">
        <el-row>
          <!--左侧部分 -->
          <el-col :span="6" id = "left">
            <el-row>
              <el-col :span="24">
                <div class = "chart_left chart_main" >
                    <el-row>
                        <el-col :span="1" style="width: 1.2vw">
                        <div class = "block"></div>
                        </el-col>
                        <el-col :span="22">
                        <div class = "title">当日预约人数</div>
                        </el-col>
                    </el-row>
                    <div style="display:flex;">
                        <div class="curNum">
                            <p>
                                <span>当日预约人数</span>
                                <span v-for="(items,index) in arr" :key="index">
                                    <i v-for="(itemArr,index) in items" :key="index">{{itemArr}}</i>
                                </span>
                            </p>
                            <div class="clear"></div>
                            <p>
                                <span>当前到达人数</span>
                                 <span v-for="(items,index) in arr1" :key="index">
                                    <i v-for="(itemArr1,index) in items" :key="index">{{itemArr1}}</i>
                                </span>
                            </p>
                        </div>
                        <div id = "chart1" class = "chart chartbg" style="width:16vw;height: 23vh"></div>
                    </div>
                </div>
              </el-col>
              <el-col :span="24">
                <div class = "chart_left chart_main" >
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">预约选乘公交人数</div>
                    </el-col>
                  </el-row>
                  <div id = "chart2" class = "chart"></div>
                </div>
              </el-col>
              <el-col :span="24">
                <div class = "chart_left chart_main" >
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">当日预约车辆</div>
                    </el-col>
                  </el-row>
                  <div style="display:flex;">
                    <div class="curNum2">
                      <p>
                        <span>当日预约车辆</span>
                        <span v-for="(items,index) in arrs" :key="index">
                            <i v-for="(itemArr,index) in items" :key="index">{{itemArr}}</i>
                        </span>
                      </p>
                      <div class="clear"></div>
                      <p>
                        <span>当前到达车辆</span>
                        <span v-for="(items,index) in arrs1" :key="index">
                            <i v-for="(itemArr1,index) in items" :key="index">{{itemArr1}}</i>
                        </span>
                      </p>
                    </div>
                    <div id = "chart3" class = "chart" style="width:16vw;height: 23vh;"></div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <!--中间部分 -->
          <el-col :span="13" id = "center">
            <el-row>
              <el-col :span="24">
                <div class = "chart_center chart_main" style="height: 91vh;">
                  <div class="line_index2">
                      <p>
                        <span>当前在途公交车辆数</span>
                        <span v-for="(items,index) in currentNum" :key="index">
                            <i v-for="(itemArr,index) in items" :key="index">{{itemArr}}</i>
                        </span>
                        <span>辆</span>
                      </p>
                      <div class="clear"></div>
                      <p>
                        <span>当前拥堵公交车辆数</span>
                        <span v-for="(items,index) in wallNum" :key="index">
                            <i v-for="(itemArr1,index) in items" :key="index">{{itemArr1}}</i>
                        </span>
                        <span>辆</span>
                      </p>
                    </div>
                  <div id="allmap" ref="allmap"></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <!--右侧部分 -->
          <el-col :span="5" id = "right">
            <el-row>
             <el-col :span="24">
                <div class = "chart_right chart_main" style="height: 29.5vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">公交车运力分布</div>
                    </el-col>
                  </el-row>
                  <div id = "chart4" class = "chart"></div>
                </div>
              </el-col>
              <el-col :span="24">
                <div class = "chart_left chart_main" style="height: 29.5vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">接驳车运力分布</div>
                    </el-col>
                  </el-row>
                  <div id = "chart5" class = "chart"></div></div>
              </el-col>
              <el-col :span="24">
                <div class = "chart_right chart_main" style="height: 29.5vh">
                  <el-row>
                    <el-col :span="1" style="width: 1.2vw">
                      <div class = "block"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class = "title">停车场剩余车位分布</div>
                    </el-col>
                  </el-row>
                  <div id = "chart6" class = "chart"></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios';
  import { TMap } from '../TMap';
  import 'font-awesome/css/font-awesome.min.css';
  import {parks,venue} from '../../static/js/map/parking.js';
  import {busLine} from '../../static/js/map/busLine.js';
  import {latLngInit} from '../../static/js/map/gpsToTX.js';
  import right from '../../static/img/right.png';
  import gj from '../../static/img/bus_gj.png';
  import {config,xAxiss,yAxiss,grid,tooltip,dotHtml,legend} from '../../static/js/config/chartConfig.js';
  import jq from 'jquery';
  import liquidfill from '../../static/js/echarts-liquidfill';
  var echarts = require('echarts');
  var chart1 = [{"tm":"一小时以内","nu":200,"pro":5.25},{"tm":"1","nu":260,"pro":6.82},{"tm":"2","nu":400,"pro":10.50},{"tm":"3","nu":600,"pro":15.75},
    {"tm":"4","nu":1200,"pro":31.50},{"tm":"5","nu":600,"pro":15.75},{"tm":"6","nu":300,"pro":7.87},{"tm":"7","nu":200,"pro":5.25},{"tm":"8","nu":150,"pro":1.31},{"tm":"9","nu":50,"pro":1.31}];
  var tab = [{"time":'7:00-8:00',"num":500},{"time":'8:00-9:00',"num":488},{"time":'9:00-10:00',"num":455},{"time":'10:00-11:00',"num":432}
    ,{"time":'11:00-12:00',"num":399},{"time":'12:00-13:00',"num":367},{"time":'13:00-14:00',"num":366},{"time":'14:00-15:00',"num":355},{"time":'15:00-16:00',"num":300}
    ,{"time":'16:00-17:00',"num":456},{"time":'17:00-18:00',"num":500},{"time":'18:00-19:00',"num":555}];
  var chart2 = [{
    ranking: '1',
    parkNmae: '停车场1',
    berth: '123'
  }, {
    ranking: '2',
    parkNmae: '停车场2',
    berth: '113'
  }, {
    ranking: '3',
    parkNmae: '停车场3',
    berth: '109'
  }, {
    ranking: '4',
    parkNmae: '停车场4',
    berth: '87'
  }, {
    ranking: '5',
    parkNmae: '停车场5',
    berth: '78'
  }, {
    ranking: '6',
    parkNmae: '停车场6',
    berth: '66'
  }, {
    ranking: '7',
    parkNmae: '停车场7',
    berth: '42'
  }, {
    ranking: '8',
    parkNmae: '停车场8',
    berth: '42'
  }, {
    ranking: '9',
    parkNmae: '停车场9',
    berth: '42'
  }, {
    ranking: '10',
    parkNmae: '停车场10',
    berth: '42'
  }, {
    ranking: '11',
    parkNmae: '停车场11',
    berth: '42'
  }, {
    ranking: '12',
    parkNmae: '停车场12',
    berth: '42'
  }, {
    ranking: '13',
    parkNmae: '停车场13',
    berth: '42'
  }, {
    ranking: '14',
    parkNmae: '停车场14',
    berth: '42'
  }, {
    ranking: '15',
    parkNmae: '停车场15',
    berth: '42'
  }, {
    ranking: '16',
    parkNmae: '停车场16',
    berth: '42'
  }, {
    ranking: '17',
    parkNmae: '停车场17',
    berth: '42'
  }]
  export default {
    name:"index",
    components: {

    },
    data(){
      return{
        nav2: [{name: '685中',color:'#ff2800',cla:'bus_color0 bus_color'},
          {name: '572区间',color:'#30ff00',cla:'bus_color1 bus_color'},
          {name: '572中',color:'#dd00ff',cla:'bus_color2 bus_color'}
        ],
        line:[],
        busline:[],
        tableData:chart2,
        pa_tab:tab,
        t_w1:'20px',
        t_w2:'200px',
        arr:[],
        arr1:[],
        arrs:[],
        arrs1:[],
        currentNum:[],
        wallNum:[],
        div1Mask:"16881",
        div2Mask:"16882",
        div3Mask:"16883",
        div4Mask:"16884",
        div5Mask:"16885",
        div6Mask:"16886",
        div7Mask:"16887",
        div8Mask:"16888",
      }
    },
    components: {
    },
    created () {

    },
    mounted () {
      this.t_w1 =config().fontSize*7+'px'
      this.t_w2 =config().fontSize*8+'px'
      this.chart1()
      this.chart2()
      this.chart3()
      this.chart4()
      this.chart5()
      this.chart6()
      this.config()
      this.map()
    },
    methods: {
      changeLine(a){
        this.line_ind = a
        this.map(a);
      },
      busLineColor(data,color){
        var d = [];//[{"name":"685中","color":"#ffa300","cla":"par_color par_color0"},{"name":"572区间","color":"#ffef00","cla":"par_color par_color1"},{"name":"会展应急一线","color":"#56ff00","cla":"par_color par_color2"}];
        var a = 0;
        for(var i = 0;i < data.length; i++) {
          var tmp = {};
          if(data[i].TRACK != null){
            tmp.name = data[i].NAME;
            tmp.color = color[i];
            tmp.cla = 'bus_color bus_color'+a;
            d.push(tmp)
            a++
          }
        }
        this.nav2 = d;
        for(var m = 0;m < this.nav2.length; m++) {
          var cls = '.bus_color' +m
          jq(cls).css('background', this.nav2[m].color)
        }
      },
      //地图添加折线
      addLine(map){
        var color = ['#ffa300','#ffef00','#56ff00','#00e5ff','#001eff','#af00ff','#ff007f','#ff3000','#82f2ce'];
        // this.$http({
        //   url: this.$http.adornUrl("/bigscreen/busroute/busLine"),
        //   method: 'get',
        //   // params: this.$http.adornParams({
        //   //   'page':1,
        //   //   'limit': 2,
        //   //   'jobid': 3,
        //   //   'chk_projid': 4
        //   // })
        // }).then(({data}) => {
        //   var lines = data.list;
        //   this.busLineColor(lines,color);
        //   for(var i = 0;i < lines.length; i++) {
        //     (function(v){
        //       if(lines[v].TRACK != null){
        //         var pl = latLngInit(lines[v].TRACK)
        //         var polyline = new qq.maps.Polyline({
        //           path: pl,
        //           strokeColor: color[v],
        //           strokeWeight: 2,
        //           //strokeDashStyle:"dash",
        //           zIndex: 1000,
        //           editable:false,
        //           map: map
        //         });
        //       }
        //     })(i);
        //   }
        // })

        var lines = busLine();
        this.busLineColor(lines,color);
        for(var i = 0;i < lines.length; i++) {
          (function(v){
            if(lines[v].TRACK != null){
              var pl = latLngInit(lines[v].TRACK)
              var polyline = new qq.maps.Polyline({
                path: pl,
                strokeColor: color[v],
                strokeWeight: 2,
                //strokeDashStyle:"dash",
                zIndex: 1000,
                editable:false,
                map: map
              });
            }
          })(i);
        }
      },
      //在地图添加多边形覆盖物
      addOutline(map,data){
        //国博馆轮廓
        for (var n = 0; n < data.length; n++) {
          var ph = []
          for (var k = 0; k < data[n].path.length; k++) {
            ph.push(new qq.maps.LatLng(data[n].path[k][0], data[n].path[k][1]))
          }
          var bw = 0
          if(data[n].name == '重庆国际<br/>博览中心'){
            bw = 1
          }
          var polygon2 = new qq.maps.Polygon({
            map: map,
            path: ph,
            strokeWeight: bw,
            strokeDashStyle: 'dash',
            strokeColor: '#a2ecfb',
            fillColor: qq.maps.Color.fromHex(data[n].color, data[n].transparent)
          });
          if(data[n].showName) {
            var ce = new qq.maps.LatLng(data[n].center[0], data[n].center[1]);
            var la = new qq.maps.Label({
              position: ce,
              map: map,
              content: '<div class = "tit" style="display: none;height: 12px;width:12px;margin-top: -67%;margin-left: -63%;">' + data[n].name + '</div>'
            });
          }
        }
        var dd = [
          {"type":1,"point":[29.712633,106.541424],"info":'572区间',color:'#ff2661'},
          {"type":1,"point":[29.710047,106.523695],"info":'572区间',color:'#ff2661'},
          // {"type":1,"point":[29.718806,106.513352],"info":'572区间',color:'#af00ff'},
          // {"type":1,"point":[29.724769,106.556697],"info":'685中',color:'#ffef00'},
          // {"type":1,"point":[29.723576,106.559765],"info":'685中',color:'#ffef00'},
          {"type":1,"point":[29.723763,106.578884],"info":'685中',color:'#45a1ff'},
        ];
        for(var y = 0;y < dd.length; y++) {
          (function(q){
            var ce = new qq.maps.LatLng(dd[q].point[0],dd[q].point[1]);
            var la = new qq.maps.Label({
              position: ce,
              map: map,
              content: '<div style="height: 4vh;width:4vh;margin-top: -60%;margin-left: -55%;border-radius: 50%;background-color: '+dd[q].color+' !important;background-image: url('+gj+');background-repeat: no-repeat;background-size: 100%;"></div>'
            });
            var inf = new qq.maps.InfoWindow({
              map: map
            });
            var car_name = '公交车';
            qq.maps.event.addListener(la, 'click', function() {
              inf.open();
              inf.setContent('<div style="text-align:center;white-space:'+
                'nowrap;margin:10px;color: #000fff;">'+car_name+dd[q].info+'</div>');
              inf.setPosition(ce);
            });
          })(y);
        }
      },
      map(){
        var p = parks();
        TMap().then(qq => {
          var map = new qq.maps.Map(document.getElementById("allmap"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(29.717129,106.544380),
            zoom: 11,
            mapStyleId: 'style1',
            //disableDefaultUI: true,    //禁止所有控件
          });

          //卫星地图
          // var map;
          // map = new qq.maps.Map(document.getElementById("allmap"), {
          // //通过mapTypeId来设置卫星地图样式
          //     mapTypeId:qq.maps.MapTypeId.SATELLITE,
          //     center: new qq.maps.LatLng(29.717986,106.543071),
          //     zoom: 15,
          //     // zoomLevel:15zoomLevel
          // });

          //alert(JSON.stringify(lines))
          this.line = this.addLine(map)
          this.addOutline(map,venue());
          this.addOutline(map,parks());
          //当缩放级别小于15 隐藏文字
          qq.maps.event.addListener(map,'zoom_changed',function() {
            var zoomLevel = map.getZoom();
            var si = {"f15":1.5,"f16":1.8,"f17":2.3,"f18":3.8}
            //jq('.tit').css('font-size',si['f'+zoomLevel]+'vh')
            if(zoomLevel>14){
              jq('.tit').css('display','block')
            }else{
              jq('.tit').css('display','none')
            }
          });
        });

        jq(function(){
          jq("#allmap").bind("DOMNodeInserted",function(e){
            var tempCount = 0;
            jq("#allmap .smnoprint").siblings().each(function(){
              tempCount++;
              if(tempCount==2||tempCount==3){
                jq(this).remove();
              }
            });
          });
        });

      },
      config(){
        var peoCurAbout = "20.00万";
        var arr=this.arr;
        peoCurAbout = peoCurAbout.split('');
        arr.push(peoCurAbout);

        var peoPlanAbout = "15.26万";
        var arr1=this.arr1;
        peoPlanAbout = peoPlanAbout.split('');
        arr1.push(peoPlanAbout);

        var peoCurAbout1 = "3456辆";
        var arrs=this.arrs;
        peoCurAbout1 = peoCurAbout1.split('');
        arrs.push(peoCurAbout1);

        var peoPlanAbou1t2 = "2789辆";
        var arrs1=this.arrs1;
        peoPlanAbou1t2 = peoPlanAbou1t2.split('');
        arrs1.push(peoPlanAbou1t2);

        var peoCurAbout1 = "56";
        var currentNum=this.currentNum;
        peoCurAbout1 = peoCurAbout1.split('');
        currentNum.push(peoCurAbout1);

        var peoPlanAbou1t2 = "03";
        var wallNum=this.wallNum;
        peoPlanAbou1t2 = peoPlanAbou1t2.split('');
        wallNum.push(peoPlanAbou1t2);
      },
      chart1(){
        var chartsBar_left = echarts.init(document.getElementById('chart1'));
        var value = 0.48;
        var data = [value, value, value,];
        var option = {
            graphic: [{
                type: 'group',
                left: 'center',
                bottom: 10,
            }],
            series: [{
                type: 'liquidFill',
                radius: '70%',
                center: ['50%', '50%'],
                data:[ 0.6, {
                    value: 0.5,
                    direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                    itemStyle: {
                        normal: { //正常样式
                            color: '#3deffd',
                            opacity: 0.6,
                        }
                    },
                },
                {
                    value: 0.4,
                    itemStyle: {
                        normal: { //正常样式
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0399fd' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#52fcfc' // 100% 处的颜色
                            }], false),
                        }
                    },
                },
                ],
                outline: {
                  // show: true , //是否显示轮廓 布尔值
                  borderDistance: config().lineWidth*5, // 外部轮廓与图表的距离 数字
                  itemStyle: {
                    borderColor: '#0f4f98', // 边框的颜色
                    borderWidth: config().lineWidth*5, // 边框的宽度
                  }
                },
                backgroundStyle: {
                    borderWidth: config().lineWidth*3,
                    borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#51fdfb' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#2373ff' // 100% 处的颜色
                    }], false),
                    color: '#0b2043'
                },
                label: {
                    normal: {
                        formatter: (value * 100)+ '%'+'\n\n实达占比',
                        textStyle: {
                            fontSize: config().fontSize,
                        }
                    }
                }
            }]
        }
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart2(){
        var data1 = [300,400,500];
        var data2 = [];
        for (var i = 0; i <data1.length; i++) {
          var tmp = {}
          tmp.value = data1[i]
          tmp. symbolPosition = 'end'
          data2.push(tmp)
        }
        var xData =['去年预约公交人数','今年去年同比预估','今年规预约公交实达人数'];
        var barWidth = jq("#chart2").width()/xData.length*0.2;
        var chart2 = echarts.init(document.getElementById('chart2'));
        var option = {
          grid: grid(20),
          tooltip:  {
            trigger: "axis",
            axisPointer: config().axisPointer,
            textStyle: config().textStyle,
            formatter: function(params) {
              var result = params[0].name
              result += "</br>" + dotHtml(params[0].color) + params[2].seriesName + '：' + params[2].data+'个'+
                "</br>" + dotHtml(params[3].color) + params[3].seriesName + '：' + params[3].data+' %'
              return result}
          },
          legend: legend(["人数", "占比",],4),
          xAxis: {
              data:xData,
              //splitNumber:6,
              axisTick: {
                show: false,
                lineStyle: {
                  color: config().color,
                  width: config().XYlineWidth
                }
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: config().color,
                  width: config().XYlineWidth
                }
              },
              axisLabel: {
                //show: l,
                margin:config().Xmargin,
                interval:0,
                formatter: function (v) {
                  if(v == "今年去年同比预估"){
                    return '\n'+v
                  }else{
                    return v
                  }
                },
                textStyle: {
                  color: config().color,
                  fontSize:config().fontSize
                }
              },
              splitLine: {
                show:false
              }
            },
          yAxis: [yAxiss({'data':'','name':'人','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":true,"splitLineType":'',"splitLineColor":''}),
            yAxiss({'data':'','name':'','lineShow':true,'labelShow':true,'position':'right','unit':'%',"splitLineShow":false,"splitLineType":'',"splitLineColor":''})
          ],
          series: [
            {
              name: '设备',
              type: 'pictorialBar',
              symbolSize: [barWidth,  barWidth*0.6],
              symbolOffset: [0, -barWidth*0.3],
              z: 12,
              itemStyle: {
                normal: {
                  color: '#0399fd'
                }
              },
              data: data2
            }, {
              name: '设备',
              type: 'pictorialBar',
              symbolSize: [barWidth, barWidth*0.6],
              symbolOffset: [0, barWidth*0.3],
              z: 12,
              itemStyle: {
                normal: {
                  color: '#0399fd'
                }
              },
              data: data1
            }, {
              name :'人数',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#0399fd',
                  opacity: 0.7,
                }
              },
              //silent: true,
              barWidth: barWidth,
              barGap: '-100%', // Make series be overlap
              data: data1
            },
            {
              name:'占比',
              data: [4.2, 3.8, 4.8,],
              yAxisIndex: 1,
              type: 'line',
              symbolSize: config().symbolSize,
              z:20,
              lineStyle: {
                width: config().lineWidth
              },
              itemStyle: {
                normal: {
                  color:  "#ff0053"
                }
              },
            }
          ]
        }
        chart2.setOption(option)
        window.onresize = chart2.resize;
      },
      chart3(){
        var chartsBar_left = echarts.init(document.getElementById('chart3'));
        var highlight = '#a3a3a3';
        var demoData = [
            {
                name: '实达占比',
                value: 60,
                unit: '%',
                pos: ['50%', '60%'],
                range: [0, 100],
                colora: 'rgba(193,136,244,0.9)',
                colorb: 'rgba(0,252,255,0.9)'
            }
        ];
        var option = {
            series: (function() {
                var result = [];
                demoData.forEach(function(item) {
                    result.push(
                        // 内侧指针、数值显示
                        {
                            name: item.name,
                            type: 'gauge',
                            center: item.pos,
                            radius: '90%',
                            startAngle: 225,
                            endAngle: -45,
                            min: 0,
                            max: 100,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: 2,
                                    color: [
                                        [
                                            item.value / 100, new echarts.graphic.LinearGradient(
                                                0, 0, 1, 0, [{
                                                        offset: 0,
                                                        color: 'rgba(255,255,255,0)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'white',
                                                    }
                                                ]
                                            )
                                        ],
                                        [
                                            1, 'rgba(255,255,255, 0)'
                                        ]
                                    ]
                                }
                            },
                            axisTick: {
                                show: 0,
                            },
                            splitLine: {
                                show: 0,
                            },
                            axisLabel: {
                                show: 0
                            },
                            pointer: {
                                show: 0,
                            },
                            detail: {
                                show: 0
                            },
                            data: [{
                                value: item.value,
                            }]
                        },
                        // 外围刻度
                        {
                            type: 'gauge',
                            center: item.pos,
                            radius: '90%', // 1行3个
                            splitNumber: item.splitNum || 10,
                            min: 0,
                            max: 100,
                            startAngle: 225,
                            endAngle: -45,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: 1,
                                    color: [
                                        [1, 'rgba(0,0,0,0)']
                                    ]
                                }
                            }, //仪表盘轴线
                            axisTick: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.6)',
                                    width: config().XYlineWidth,
                                },
                                length: config().XYlineWidth*-6,
                            }, //刻度样式
                            splitLine: {
                                show: true,
                                length: config().XYlineWidth*12,
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.6)'
                                }
                            }, //分隔线样式
                            axisLabel: {
                                show: true,
                                distance: config().XYlineWidth*2,
                                textStyle: {
                                    color: "white",
                                    fontSize: config().fontSize,
                                }
                            },
                            pointer: {
                                show: 0
                            },
                            detail: {
                                show: 0
                            }
                        },
                        // 内侧指针、数值显示
                        {
                            name: item.name,
                            type: 'gauge',
                            center: item.pos,
                            radius: '94%',
                            startAngle: 225,
                            endAngle: -45,
                            min: 0,
                            max: 100,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: config().XYlineWidth*50,
                                    color: [
                                        [
                                            item.value / 100, new echarts.graphic.LinearGradient(
                                                0, 0, 1, 0, [{
                                                        offset: 0,
                                                        color: 'rgba(0,0,0, 0)',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: item.colorb,
                                                    }
                                                ]
                                            )
                                        ],
                                        [
                                            1, 'rgba(255,255,255, 0)'
                                        ]
                                    ]
                                }
                            },
                            axisTick: {
                                show: 0,
                            },
                            splitLine: {
                                show: 0,
                            },
                            axisLabel: {
                                show: 0
                            },
                            pointer: {
                                show: true,
                                length: '102%',
                                width: config().XYlineWidth*3,
                            },
                            title: {
                                show: true,
                                offsetCenter: [0, '65%'],
                                color: 'white',
                                fontSize: config().fontSize,
                                borderRadius: config().XYlineWidth*10,
                                padding: config().XYlineWidth*5,
                            },
                            detail: {
                                show: true,
                                offsetCenter: [0, 10],
                                textStyle: {
                                    fontSize: config().fontSize,
                                    fontWeight: 'bold',
                                    color: 'white',
                                },
                                formatter: [
                                    '{value}' + (item.unit || ''),
                                    /* '{name|' + item.name + '}'*/
                                ].join('\n'),

                                rich: {
                                    name: {
                                        fontSize: config().fontSize,
                                        lineHeight: config().XYlineWidth*10,
                                        color: '#ddd',
                                        padding: [30, 0, 0, 0]
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: highlight,
                                }
                            },
                            data: [{
                                value: item.value,
                                name: item.name
                            }]
                        }
                    );
                });
                return result;
            })()
        }
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart4(){
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var xData  = ['路线1','路线2','路线3','路线4','路线5','路线6','路线7','路线8','路线9'];
        for (var i = 1; i <chart1.length; i++) {
          data1.push(chart1[i].nu)
          data3.push(chart1[i].pro)
        }
        var barWidth = jq("#chart4").width()/xData.length*0.25
        var y = []
        y.push(yAxiss({'data':'','name':'辆','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'right','unit':'%',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}))
        var chartsBar_left = echarts.init(document.getElementById('chart4'));
        var option = {
          tooltip:  {
            trigger: "axis",
            axisPointer: config().axisPointer,
            textStyle: config().textStyle,
            // formatter: function(params) {
            //   var result = params[0].name
            //   result += "</br>" + dotHtml(params[0].color) + params[0].seriesName + '：' + params[0].data+' 辆'+
            //     "</br>" + dotHtml(params[1].color) + params[1].seriesName + '：' + params[1].data+' %'
            //   return result}
          },
          grid: grid(20),
          legend: legend(["车辆数", "占比",],4),
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          yAxis:y,
          series: [{
            name :'车辆数',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius:50,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#50fafc' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#01aaff' // 100% 处的颜色
                }], false),
                opacity: 0.7
              },
            },
            //silent: true,
            barWidth: barWidth,
            barGap: '-100%', // Make series be overlap
            data: data1
          },
          {
            name:'占比',
            data: data3,
            yAxisIndex: 1,
            type: 'line',
            symbol: 'circle',
            symbolSize: config().symbolSize,
            showSymbol: false,
            z:20,
            lineStyle: {
              width: config().lineWidth
            },
            itemStyle: {
              normal: {
                color:  "#F7D868"
              }
            },
          }
          ]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart5(){
        var chartsBar_left = echarts.init(document.getElementById('chart5'));
        var data = [{
          name: "路线1",
          value: 754
        },
          {
            name: "路线2",
            value: 611
          },
          {
            name: "路线3",
            value: 400
          },
          {
            name: "路线4",
            value: 200
          },
          {
            name: "路线5",
            value: 100
          }
        ];
        var barWidth = jq("#chart5").width()/data.length*0.25
        var arrName = getArrayValue(data, "name");
        var arrValue = getArrayValue(data, "value");
        var sumValue = eval(arrValue.join('+'));
        var objData = array2obj(data, "name");
        var optionData = getData(data)
        function getArrayValue(array, key) {
          var key = key || "value";
          var res = [];
          if (array) {
            array.forEach(function(t) {
              res.push(t[key]);
            });
          }
          return res;
        }

        function array2obj(array,key) {
          var resObj = {};
          for(var i=0;i<array.length;i++){
            resObj[array[i][key]] = array[i];
          }
          return resObj;
        }

        function getData(data) {
          var res = {
            series: [],
            yAxis: []
          };
          for (let i = 0; i < data.length; i++) {
            res.series.push({
              name: '',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
              center: ["30%", "55%"],
              label: {
                show: false
              },
              itemStyle: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false
                },
                borderWidth: barWidth,
              },
              data: [{
                value: data[i].value,
                name: data[i].name
              }, {
                value: sumValue - data[i].value,
                name: '',
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0
                },
                tooltip: {
                  show: false
                },
                hoverAnimation: false
              }]
            });
            res.series.push({
              name: '',
              type: 'pie',
              silent: true,
              z: 1,
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
              center: ["30%", "55%"],
              label: {
                show: false
              },
              itemStyle: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false
                },
                borderWidth: 1,
              },
              data: [{
                value: 7.5,
                itemStyle: {
                  color: "#063a5c",
                  borderWidth: barWidth
                },
                tooltip: {
                  show: false
                },
                hoverAnimation: false
              }, {
                value: 2.5,
                name: '',
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth:barWidth
                },
                tooltip: {
                  show: false
                },
                hoverAnimation: false
              }]
            });
            res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
          }
          return res;
        }
        var option = {
          legend: {
            show: true,
            icon:"circle",
            orient: 'vertical',
            itemWidth: config().legendHeight,
            itemHeight: config().legendHeight,
            itemGap: config().legendFontSize,
            top: '20%',
            right:0,
            data: arrName,
            formatter: function(name) {
              return "{title|" + name + "}"
            },
            textStyle: {
              rich: {
                title: {
                  fontSize: config().legendFontSize,
                  color: config().legendColor
                },
                value: {
                  fontSize: config().legendFontSize,
                  color: "#fff"
                }
              }
            },
          },
          // legend: legend(arrName,1),
          tooltip:  {
            show: true,
            trigger: "item",
            axisPointer: config().axisPointer,
            textStyle: config().textStyle,
            formatter: "{b}:{d}%"
          },
          color: ['#00b991', '#00b5f0', '#004dcc', '#5522be','#d10fa6'],
          grid: {
            top: '16%',
            bottom: '46%',
            left: "30%",
            containLabel: false
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: "#fff",
                fontSize: config().fontSize,
              },
              show: true
            },
            data: optionData.yAxis
          }],
          xAxis: [{
            show: false
          }],
          series: optionData.series
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart6(){
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var xData  = ['6:00','6:10','6:20','6:30','6:40','6:50','7:00','7:10'];
        for (var i = 1; i <chart1.length; i++) {
          data1.push(chart1[i].nu)
          data3.push(chart1[i].pro)
        }
        var barWidth = jq("#chart6").width()/xData.length*0.25;
        // var y = []
        // y.push(yAxiss({'data':'','name':'辆','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'right','unit':'%',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}))
        var chartsBar_left = echarts.init(document.getElementById('chart6'));
        var option = {
            tooltip:  {
              trigger: "axis",
              axisPointer: config().axisPointer,
              textStyle: config().textStyle,
              formatter: function(params) {
                var result = params[0].name
                result += "</br>" + dotHtml(params[0].color) + params[0].seriesName + '：' + params[0].data+'辆'
                return result}
            },
            grid: grid(15),
            legend: legend(["剩余车位数",],4),
            xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'',"splitLineColor":''}),
            yAxis: [yAxiss({'data':'','name':'辆','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":true,"splitLineType":'',"splitLineColor":''}),],
            series: [
              {
                name: '剩余车位数',
                type: 'line',
                symbolSize: config().symbolSize,
                lineStyle: {
                  width: config().lineWidth
                },
                itemStyle: {
                    normal: {
                        color:"#6a4de7"
                    }
                },
                data: data1,
                barGap: 0
              }
            ]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      }
    }
  }
</script>
<style lang="scss" scoped>
  #index{
    width: 100%;
    height: 100vh;
    background: #081220;
    *{margin: 0;padding: 0;}
    cursor:pointer;
    .clear{clear:both;}
    #allmap{
      height: 91vh;
      overflow: hidden;
    }
    .line_index2{
      position: absolute;
      left: 1vw;
      top: 4vh;
      padding: 1vh;
      font-size: 2vh;
      z-index: 10000;
      color: #fff;
      p{
        padding-top: 3vh;
        padding-left: 2.5vh;
        span{
          display: block;
          margin-top: 0.5vh;
          i{
            font-size: 0.8vw;
            border: 1.5px solid #45a1ff;
            background: #0b1025;
            color: #45a1ff;
            width: 3.5vh;
            height: 4vh;
            text-align: center;
            line-height: 4vh;
            float: left;
            margin-right: 0.3vh;
            font-style: normal;
          }
        }
        span:nth-child(3){
          display: inline-block;
          margin-top: 0.7vw;
          margin-left: 0.5vw;
        }
      }
      p:nth-child(3){
        i{
            font-size: 0.8vw;
            border: 1.5px solid #ff2661;
            background: #0b1025;
            color: #ff2661;
            width: 3vh;
            height: 4vh;
            text-align: center;
            line-height: 4vh;
            float: left;
            margin-right: 0.3vh;
            font-style: normal;
          }
      }
    }
    .line_index3{
      position: absolute;
      left: 1vw;
      top: 11vh;
      padding: 1vh;
      font-size: 2vh;
      background-color: rgba(89,93,100,0.9);
      z-index: 10000;
      color: #fff;
      span{
        color: red;
        font-size: 2.8vh;
        font-weight: bold;
      }
    }
    .bus_color{
      height: 0.5vh;
      width: 2.5vw;
      float: left;
      margin-top: 2.25vh;
      margin-left: 1vw;
    }
    .bus_use{
      color: #fff;
      font-size: 0.7vw;
      width: 63%;
      line-height: 5vh;
      margin-left: 4vw;
    }
    #centerContent{
      height: 91vh;
      overflow: hidden;
      background-image: url('../../static/img/indexcenter.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 90% 100%;
      font-size: 0.8vw;
      color: #ffffff;
      .div1{
          position: absolute;
          top: 46.5%;
          left: 10%;
      }
      .div2{
          position: absolute;
          top: 31%;
          left: 17%;
      }
      .div3{
          position: absolute;
          top: 26%;
          left: 35%;
      }
      .div4{
          position: absolute;
          top: 23.5%;
          right: 34%;
      }
      .div5{
          position: absolute;
          top: 32.5%;
          right: 14.5%;
      }
      .div6{
          position: absolute;
          top: 46%;
          right: 8.5%;
      }
      .div7{
          position: absolute;
          bottom: 38%;
          right: 30.5%;
      }
      .div8{
          position: absolute;
          bottom: 38%;
          left: 33%;
      }
      .div9{//中心位置'悦来交通大数据'
          position: absolute;
          top: 42%;
          right: 39.5%;
          font-size: 1.5vw;
      }
    }
    .curNum{
      width: 42%;
      font-size: 0.7vw;
      color: #ffffff;
      p{
        padding-top: 3vh;
        padding-left: 1.5vh;
        span{
          display: block;
          margin-top: 0.5vh;
          i{
            font-size: 2.2vh;
            background: #2256d9;
            color: #fff;
            width: 2.5vh;
            height: 3.3vh;
            text-align: center;
            line-height: 3.3vh;
            float: left;
            margin-right: 0.2vh;
            font-style: normal;
          }
        }
      }
    }
    .curNum2{
      width: 42%;
      font-size: 0.7vw;
      color: #ffffff;
      p{
        padding-top: 3vh;
        padding-left: 1.5vh;
        span{
          display: block;
          margin-top: 0.5vh;
          i{
            font-size: 2.2vh;
            background: #00bcc8;
            color: #fff;
            width: 2.5vh;
            height: 3.3vh;
            text-align: center;
            line-height: 3.3vh;
            float: left;
            margin-right: 0.2vh;
            font-style: normal;
          }
        }
      }
    }
    .chartbg{
        background-image: url('../../static/img/curNumBg.png');
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 95% 25%;
    }
    .chart5Text{
        width: 50%;
        margin-top: 4vh;
        font-size: 0.5vw;
        color: #AFB8D2;
        p{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1vw 0 0;
            margin-top: 3vh;
        }
        p:nth-child(1){
             span:nth-child(1){
                width: 0.5vw;
                height: 0.5vw;
                background:#52fbfc;
            }
            span:nth-child(5){
                color: #52fbfc;
            }
        }
        p:nth-child(2){
             span:nth-child(1){
                width: 0.5vw;
                height: 0.5vw;
                background:#8ad0ff;
            }
            span:nth-child(5){
                color: #8ad0ff;
            }
        }
        p:nth-child(3){
             span:nth-child(1){
                 width: 0.5vw;
                height: 0.5vw;
                background:#208efe;
            }
            span:nth-child(5){
                color: #208efe;
            }
        }
    }
    .tltleText{
      height: 7vh;
    }
    .chart{
      height: 85%;
    }
    .next_chart{
      width: 50vh;
      height: 34vh;
    }
    .chart_left{
      height: 29.6vh;
    }
    .el-popover{
      background: rgb(26,57,146)!important;
      border: 0 !important;
      color: #fff !important;
      font-size: 0.8vw !important;
    }
  }
</style>
